<template>
	<view class="wrap">
		<view class="container">
			<view class="column-css">
				<view v-if="vehiclelist.currentList.length == 0" class="column-css" style="justify-content: center;align-items: center;padding: 60rpx 0;">
					<image style="width: 286rpx;height: 256rpx;" mode="aspectFit" src="../../static/vehicle_information.png"></image>
					<view style="color: #999999;font-size: 28rpx;">当前暂无车辆</view>
				</view>
				<!-- <view v-if="vehiclelist.currentList.length < 2" style="position: absolute;bottom: 0;width: 100%; background: #FFFFFF;"> -->
			</view>
			<view v-if="vehiclelist.currentList.length > 0">
				<block v-for="(item, index) in vehiclelist.currentList" :key="index">
					<view style="border-radius: 10rpx;background: #FFFFFF;padding: 10rpx 20rpx;margin-bottom: 10rpx;">
						<view class="row-css" style="justify-content: space-between;align-items: center;padding: 10rpx 0;" @click="billing(item)">
							<view class="row-css">
								<view style="margin-left: 20rpx;">{{ item.plateNum }}</view>
							</view>
							<view class="row-css">
								<view class="perfection" :style="{ background: item.blacklistStatus == 1 ? '#ccc' : (item.infoState != 1 ? '#E04B28' : '#4CD964') }" v-text="stateText(item)">
									<!-- {{ item.infoState == 0 ? '未完善' : item.infoState == 1 ? '已完善' : '已过期' }} -->
								 </view>
								<view class="row-css" style="align-items: center;"><image style="width: 28rpx;height: 28rpx;" src="../../static/icon_enter.png"></image></view>
							</view>
						</view>
					</view>
				</block>
			</view>
			<view v-if="vehiclelist.otherList.length > 0" class="column-css">
				<view style="background-color: #FFFFFF;padding: 10rpx 40rpx;color: #B9B9B9;">使用过的车辆</view>
				<block v-for="(item, index) in vehiclelist.otherList" :key="index">
					<view style="border-radius: 10rpx;background: #FFFFFF;padding: 5rpx 20rpx;margin-bottom: 10rpx;">
						<view class="row-css" style="justify-content: space-between;align-items: center;padding: 10rpx 0;" @click="billing(item)">
							<view class="row-css">
								<view style="margin-left: 20rpx;">{{ item.plateNum }}</view>
							</view>
						</view>
					</view>
				</block>
			</view>
		</view>
		<view class="btn">
			<view style="padding: 20rpx;text-align: center;color: #FFFFFF;margin: 5rpx 30rpx; background: #2B7CFF;border-radius: 5rpx;" @click="addcar">+添加车辆</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			vehiclelist: {
				currentList: [
					// {
					// 	account: '第一辆车',
					// 	plateNum: '粤A DC899'
					// },
					// {
					// 	account: '第二辆车',
					// 	plateNum: '粤A DC899'
					// }
				],
				otherList: []
			},
			isDefault: 1
		};
	},

	methods: {
		stateText(item){
			if(item.infoState == 0) {
				if(item.blacklistStatus == 1 ){
					return '黑名单'
				}else{
					if(item.vehicleEtpStatus == 4){
						return '申诉中'
					}else{
						return '未完善'
					}
				}
			}else if(item.infoState == 1) {
				if(item.blacklistStatus == 1 ){
					return '黑名单'
				}else{
					if(item.vehicleEtpStatus == 4){
						return '申诉中'
					}else{
						return '已完善'
					}
				}
			}else{
				if(item.blacklistStatus == 1 ){
					return '黑名单'
				}else{
					if(item.vehicleEtpStatus == 4){
						return '申诉中'
					}else{
						return '已过期'
					}
				}
			}
		},
		billing: function(carinfo) {
			if (carinfo.infoState != null && carinfo.infoState == 1) {
				uni.navigateTo({
					url: `/pages/vehicle/carinfo?vehicleId=` + carinfo.vehicleId +'&etp_id=' + uni.getStorageSync(this.DATA_KEY.etpId)
				});
			} else if(carinfo.infoState == 2 && carinfo.vehicleEtpStatus != 1) {
				uni.navigateTo({
					url: `/pages/vehicle/carinfo?vehicleId=` + carinfo.vehicleId +'&etp_id=' + uni.getStorageSync(this.DATA_KEY.etpId)
				});
			} else if(carinfo.infoState == 0 && carinfo.vehicleEtpStatus == 4) {
				uni.navigateTo({
					url: `/pages/vehicle/carinfo?vehicleId=` + carinfo.vehicleId +'&etp_id=' + uni.getStorageSync(this.DATA_KEY.etpId)
				});
			}else {
				uni.navigateTo({
					url: `/pages/vehicle/vehicleinformation?vehicleId=` + carinfo.vehicleId+'&etp_id=' + uni.getStorageSync(this.DATA_KEY.etpId)
				});
			}
			
			// uni.navigateTo({
			// 	url: `../personal/carinfo?vehicleId=` + carinfo.vehicleId +'&etp_id=' + uni.getStorageSync(this.DATA_KEY.etpId)
			// });
		},
		addcar() {
			if (this.vehiclelist.currentList.length > 0) {
				this.isDefault = 0;
			}
			uni.navigateTo({
				url: `/pages/vehicle/vehicleinformation?isDefault=` + this.isDefault + '&vehicleId=0'
			});
		},
		oncarlist() {
			let driverId = uni.getStorageSync(this.DATA_KEY.userInfo).driverId;
			this.wxRequest({
				url: `${this.API}/driverService/getDriverVehicle?driver_id=` + driverId + '&etp_id=' + uni.getStorageSync(this.DATA_KEY.etpId),
				method: 'POST',
				title: '加载中...',
				success: res => {
					this.vehiclelist = res.data.data;
					console.log("ddddd===========>",this.vehiclelist);
					// this.currentList = this.currentList.concat(this.currentList);
				}
			});
		}
	},
	onLoad(options) {
		this.etpId =options.etpId
		if (options.flag) {
			setTimeout(() => {
				uni.showModal({
					title: '提示',
					content: '你还未添加车辆，添加成功后即可接单',
					success: res => {
						if (res.confirm) {
							this.addcar()
						} else if (res.cancel) {
							console.log('取消');
						}
					}
				});
			}, 1000)
		}
		this.oncarlist();
	},
	onUnload() {
		uni.switchTab({
			url: '/pages/index/mine'
		})
	},
	onShow() {
		this.oncarlist();
	}
};
</script>

<style lang="scss">
.wrap{
	width: 100vw;
	height: 100wh;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	box-sizing: border-box;
	.container{
		width: 100%;
		overflow: auto;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: calc(90rpx + env(safe-area-inset-bottom));
	}
	.btn{
		width: 100%;
		background: #FFFFFF;
		position: absolute;
		left: 0;
		bottom: env(safe-area-inset-bottom);
	}
}
.row-css {
	display: flex;
	flex-direction: row;
}

.column-css {
	display: flex;
	flex-direction: column;
}

.perfection {
	border-radius: 25rpx;
	padding: 5rpx 10rpx;
	color: #ffffff;
	justify-content: center;
}
</style>
